<template>
  <div class="container page">
    <van-nav-bar
        title="我的消息"
        left-arrow
        @click-left="$router.back()"
    />
    <div class="main">
      <van-pull-refresh class="pull-refresh" v-model="refresh" success-text="刷新成功" @refresh="onRefresh">
        <div class="list-item" v-for="(item, index) in list" :key="index">
          <ul>
            <li>{{ item.name }}</li>
            <li v-html="processContent(item.text)"></li>
            <li>{{ item.create_time }}</li>
          </ul>
        </div>
        <div v-if="!list || list.length === 0" class="no-data">
          <img :src="require('../../assets/img/tip/kong.png')" alt=""/>
          <span>暂无数据</span>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import {getNoticeList} from "@api/User";

export default {
  name: "Message",
  data: function () {
    return {
      list: [],
      refresh: false
    }
  },
  activated() {
    this.initMessage();
  },
  methods: {
    onRefresh: function () {
      setTimeout(() => {
        this.refresh = false;
      }, 1000);
    },
    initMessage: function () {
      getNoticeList().then(v => {
        this.list = v.data;
      })
    },
    processContent: function (content) {
      content = content.replaceAll("\n", "<br />");
      return content;
    }
  }
};
</script>
<style scoped>
::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto
}

.container .main {
  height: calc(100% - 1.22667rem);
  overflow: auto
}

.container .pull-refresh {
  height: calc(100% - 1.22667rem);
}

.container .main .no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container .main .no-data img {
  width: 50%;
  height: 50vw;
  -o-object-fit: contain;
  object-fit: contain
}

.container .main .no-data span {
  font-size: .32rem;
  color: #999
}

.container .main .list-item {
  width: 100%;
  min-height: 1.6rem;
  margin-bottom: .26667rem;
  background-color: #f5dcf1;
}

.container .main .list-item > ul {
  width: 100%;
  height: 100%;
  padding: 0 .26667rem
}

.container .main .list-item > ul > li {
  width: 100%;
  display: flex;
  align-items: center
}

.container .main .list-item > ul > li:first-child {
  justify-content: flex-start;
  font-size: .42667rem;
  font-weight: 700;
  height: .8rem;
  color: #000
}

.container .main .list-item > ul > li:nth-child(2) {
  justify-content: flex-start;
  min-height: .8rem;
  border-bottom: .02667rem solid #cacaca;
  color: #979799;
  padding-bottom: .26667rem;
  font-size: .37333rem;
  flex-direction: column;
  align-items: flex-start
}

.container .main .list-item > ul > li:nth-child(3) {
  justify-content: flex-end;
  height: .8rem;
  color: #979799
}
</style>
